/*
 * @Descripttion: 
 * @Author: cuidm
 * @Date: 2022-07-08 11:07:01
 * @LastEditors: cuidm
 * @LastEditTime: 2022-08-05 17:14:12
 */
import React, { useState, useEffect, useRef } from "react";
import { Tabs, Row, Col, Collapse, Checkbox, Tree, Space, Empty, Popover} from "antd";
import { ProDescriptions } from '@ant-design/pro-components';
import { ArrowLeftOutlined, UploadOutlined, DownloadOutlined, SelectOutlined, DeleteOutlined, EditOutlined } from '@ant-design/icons';
import { CmdbContent, CmdbHeader, TempImportModal } from "@/components";
import cmdbres from "@/data/cmdbres";
import request from "@/utils/request";
import asyncData from './async.json';
import "../index.less";

const pp = asyncData.data.difference;
const { Panel } = Collapse;
const SyncClusterTemplate = ({ history, setId, setTemplateId }) => {
    const [panelData, setPanelData ] = useState([]);
    const [activeKey, setActiveKey] = useState([]);
    const [allCheck, setAllCheck] = useState(false);
    const changeAllCheck = (e) => {
        setAllCheck(e.target.checked);
        if(e.target.checked) {
            const keys = panelData.map(item=> item.bk_set_id);
            setActiveKey(keys);
        } else {
            setActiveKey([]);
        }
    }

    const onChange = (keys) => {
        setActiveKey(keys);
        const setIds = panelData.map(item=> item.bk_set_id);
        if(keys?.length == setIds?.length) {
            setAllCheck(true);
        } else {
            setAllCheck(false);
        }
    }

    const cancelSync = (item, index) => {
        setPanelData(panelData=> {
            panelData.splice(index,1);
            return panelData;
        })
        const _index = activeKey.findIndex(k=> k==item.bk_set_id);
        if(_index > -1) {
            setActiveKey(activeKey=> {
                activeKey.splice(_index,1);
                return activeKey;
            })
        }
    }

    const getItem = (item, flag) => {
        const _className = flag ? "set-tree-node" : `set-tree-node ${item.diff_type}`
        return {
            ...item,
            key: item.service_template_id,
            title: <div className={_className}>
                <span className="sync-icon">模</span>
                <span className="name">{item.service_template_name||item.bk_module_name||'-'}</span>
            </div>
        }
    }

    const renderPanel = (data, index) => {
        const {module_diffs, set_detail, bk_set_id} = data;
        let initObj = {
            ...set_detail,
            key: bk_set_id,
            title: <div>
                    <span className="sync-icon">集</span>
                    <span>{set_detail.bk_set_name}</span>
                </div>,
        }
        const bTreeData = [{...initObj, children: []}];
        const aTreeData = [{...initObj, children: []}];
        module_diffs?.map((item)=> {
            if(item.diff_type != "add") {
                bTreeData[0].children.push(getItem(item, true));
            }
            aTreeData[0].children.push(getItem(item, false))
        })

        return(
            <Panel 
                header={set_detail.bk_set_name} 
                key={bk_set_id}
                extra={
                    <Popover title="本次不同步">
                        <span className="iconfont icon-delete" onClick={()=>{cancelSync(data, index)}}></span>
                    </Popover>
                }>
                <Row>
                    <Col span={8}>
                        <h3 style={{float: 'left'}}>同步前</h3>
                        <Tree
                            className="set-tree"
                            defaultExpandAll
                            treeData={bTreeData}
                        />
                    </Col>
                    <Col span={8}>
                        <h3 style={{float: 'left'}}>同步后</h3>
                        <Tree
                            className="set-tree"
                            defaultExpandAll
                            treeData={aTreeData}
                        />
                    </Col>
                </Row>
            </Panel>
            
        )
    }

    useEffect(() => {
        const ee = JSON.parse(JSON.stringify(pp));
        setPanelData(ee);
        setActiveKey([ee[0].bk_set_id])
    }, [])

    return (
        <CmdbContent>
            <div className="cmdb_host_pane business">
                <div className="breadcrumbs-layout">
                    <h3><ArrowLeftOutlined 
                        onClick={() => { history.push({
                            pathname: `/business/clusterTemplate/detail/${setTemplateId}`,
                        });}}
                    /> 同步集群模板
                    </h3>
                </div>
                <div style={{backgroundColor: "#fff", padding: "10px"}}>  
                    <div style={{marginBottom: 10}}>
                        请确认以下{panelData?.length??0}个实例更改信息：
                        <Space style={{float: 'right'}}>
                            <span><span style={{color: "#2dcb56", marginRight: 5}}>●</span>新增模块</span>
                            <span><span style={{color: "#c4c6cc", marginRight: 5}}>●</span>删除模块</span>
                            <Checkbox onChange={changeAllCheck} checked={allCheck}>全部展开</Checkbox>
                        </Space>
                    </div>
                    {
                        panelData && panelData.length ?
                        <Collapse 
                            activeKey={activeKey}
                            onChange={onChange}
                        >
                        {
                            panelData.map((item, index)=> (
                                renderPanel(item, index)
                            ))
                        }
                        </Collapse>
                        : <Empty/>
                    }
                    
                </div>
            </div>
        </CmdbContent>
    )
}

export default SyncClusterTemplate;